<template>
  <table cellspacing="0" :style="{
    width: detail.position.w - 2 + 'px',
    height: detail.position.h - 2 + 'px',
  }">
    <tr v-for="item in param.row" :key="item">
      <td v-for="col in param.column" :key="col" :style="{
        borderColor: param.borderColor
      }">
      </td>
    </tr>
  </table>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, watch, onMounted, PropType } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem } from 'stores/editorModels';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { CTuplePropertyItem } from './basicViewModel'

export default defineComponent({
  name: 'ViewTupleTable',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {} as CGraphEntity
      }
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },

  setup (props, context) {
    //数据解构
    let {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CTuplePropertyItem>({
      row: 4,     //表格行
      column: 3,   //表格列
      borderColor: '#ea0c52',   //表格框线色
      borderWidth: 1,
      fillColor: 'transparent'
    });

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);
    let myData = ref(1);

    //属性更新
    const configProperty = () => {
      if ((detail.value) && (detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        let num1, num2, num3;
        //线色、线宽、填充色、行、列
        param.value.borderColor = detail.value.propsItem[i++].value;
        num1 = parseInt(detail.value.propsItem[i++].value);
        param.value.fillColor = detail.value.propsItem[i++].value;
        num2 = parseInt(detail.value.propsItem[i++].value);
        num3 = parseInt(detail.value.propsItem[i++].value);
        if (!isNaN(num1) && !isNaN(num2) && !isNaN(num3)) {
          param.value.borderWidth = num1;
          param.value.row = num2;
          param.value.column = num3;
        } else {
          showMessage('ViewTupleTable属性值不是数字！');
        }
      } else {
        showMessage('ViewTupleTable组件属性设置错误');
      }
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }

      //数据
      if (xyData.value.length > 0) {
        myData.value = xyData.value[0].value;
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });

    return {
      detail,
      myData,
      param
    };
  }
});

</script>

<style lang="scss" scoped>
table {
  border: 1px solid;
  border-collapse: collapse;
  tr {
    height: auto;
  }
  td {
    border: 1px solid;
    text-align: center;
  }
}


</style>
